<template>
	<div id="app">
		<v-app>
			<div>
				<!--警告信息提示-->
				<v-snackbar v-model="snackbar" bottom :timeout="timeout">
					当前商品不存在
				</v-snackbar>
				<!--顶部标题栏-->
				<v-app-bar app color="#FF5252">
					<v-list-item-title style="text-align: center;font-size:18px;color:white">商城频道
					</v-list-item-title>
				</v-app-bar>
				<!--筛选栏-->
				<v-navigation-drawer v-model="drawer" app right temporary>
					<v-list-item>
						<v-list-item-content>
							<v-list-item-title>积分区间</v-list-item-title>
							<v-row style="margin-top: 10px">
								<v-col style="text-align: right ">
									<input v-model="lowIntegral" class="priceText" placeholder="最低分" />
								</v-col>
								<span style="padding-top:7%">—</span>
								<v-col>
									<input v-model="highIntegral" class="priceText" placeholder="最高分" />
								</v-col>
							</v-row>		
						</v-list-item-content>
					</v-list-item>
					<v-list-item>
						<v-list-item-content>
							<v-list-item-title>商品分类</v-list-item-title>
							<v-row style="margin-top: 10px">
								<v-col>
									<select v-model="check_good_s" style="height:5vh;width:100%;text-align: center;" class="select">
										<option disabled value="" style='display:none;'>选择分类</option>
										<option v-for="sort in goods_sort" :key="sort.goods_id" :value="sort.goods_id" style="text-align: center;margin: 0 auto;">{{ sort.name }}</option>
									</select>
								</v-col>
							</v-row>
						</v-list-item-content>
					</v-list-item>
					<v-divider></v-divider>
					<div style="padding: 0 50px">
						<v-btn height="40px" block x-large dark color="#FF5252" style="font-size: 18px;" @click="(drawer = !drawer), search()">确认
						</v-btn>
					</div>
				</v-navigation-drawer>
				<!--搜索框-->
				<div style="width: 100%;margin: 0 auto;text-align: center;">
					<v-text-field label="商品关键字.." style="margin: 10px;width:76vw;float:left;" hide-details clearable background-color="#F2F2F2"
						solo flat prepend-inner-icon="search" v-model="vague"></v-text-field>
					<v-btn depressed color="error" style="margin:15px 12px;width:10%;min-width:1vh;float:left;" @click="search()">搜索</v-btn>
				</div>
				<div class="clearfloat"></div>
				<!-- 选择栏 -->
				<v-container fluid grid-list-md>
					<v-layout column>
						<v-row no-gutters style="padding: 0 0">
							<v-col>
								<v-card :flag="flag" class="pa-2" outlined tile style="text-align: center" @click="flag = !flag">
									兑换量
								</v-card>
							</v-col>
							<v-col>
								<v-card outlined solo flat style="text-align: center;" height="100%" width="100%">
									<select v-model="sort_key" style="height:100%;width:100%;text-align: center;">
										<option v-for="option in options" :key="option.id" :value="option.id" style="text-align: center;margin: 0 auto;">{{ option.text }}</option>
									</select>
								</v-card>
							</v-col>
							<v-col>
								<v-card class="pa-2" outlined tile style="text-align: center" @click.stop="drawer = !drawer">
									筛选
									<icon name="filter" scale="1"></icon>
								</v-card>
							</v-col>
						</v-row>
					</v-layout>
				</v-container>
				<!--商品信息的列表-->
				<div v-for="(item,i) in goods" :key="i">
					<v-list-item three-line @click="goGoods(item.goods_id)" style="width: 100%;">
						<v-list-item-avatar tile size="100"><img :src="item.index_image" alt="未加载" class="image_border_list" />
						</v-list-item-avatar>
						<v-list-item-content>
							<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{item.name}}</span></v-list-item-title>
							<v-list-item-subtitle><span>已兑换:{{item.volume}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>随机发货</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>精品</span></v-list-item-subtitle>
							<div class="overline" style="color:#FF5252">{{item.need_integral}}积分</div>
						</v-list-item-content>
					</v-list-item>
				</div>

				<div class="no_content" v-if="total_page==0">
					<icon name="no_content_two" scale="15"></icon>
					<div style="margin: 0 auto;font-size: 18px;">对不起，没有满足条件的商品！</div>
				</div>

				<div class="text-center" @click="getGoods()" v-if="total_page!==1 && total_page!==0 ">
					<v-pagination v-model="page" :length="total_page"></v-pagination>
				</div>
			</div>
			<v-btn text icon color="#ff5252" style="position: fixed; right: 2vw;top: 80%;">
				<v-icon @click="reload()">mdi-cached</v-icon>
			</v-btn>
		</v-app>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>

	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "Shopping",
		data() {
			return {
				timeout: 1000,
				snackbar: false,
				message: '',
				//*****分页*********
				page: 1, // 传回后端的页数
				total_page: 1, // 总页数
				current_page: "", // 当前页码 
				goods: [], // 页面数据
				//**************
				//*****传回去的参数*********
				check_good_s:'',
				sort_key: "1", // 排序方式
				vague: "", // 模糊查询 
				lowIntegral: null, // 积分区间 最低
				highIntegral: null, // 积分区间 最高
				//**************
				goods_sort: '', // 商品分类
				flag: false,
				drawer: false,
				options: [{
						text: "综合",
						id: "1"
					},
					{
						text: "积分从低到高",
						id: "2"
					},
					{
						text: "积分从高到低",
						id: "3"
					}
				],
				items: [],
				itemAll: [],
				key: "",
				list: [],
				return: {}
			}
		},
		watch: {
			//检测用户选择的排序
			sort_key: function() {
				this.getGoods();
			},
		},
		methods: {
			goGoods(goods_id){
				this.$router.push({
					name: '商品',
					params:{
						goods_id: goods_id
					}
				});
			},
			reload() {
				this.$router.go(0);
			},
			search() {
				this.page = 1;
				this.getGoods();
			},
			getGoods() {
				let _this = this;
				axios
					.get("/api/v1.0/goods/all", {
						params: {
							sort_key: _this.sort_key,
							p: _this.page,
							v: _this.vague,
							integral_high: _this.highIntegral,
							integral_low: _this.lowIntegral,
							check_good_s: _this.check_good_s
						}
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.goods = response.data.data.goods;
							_this.current_page = response.data.data.page;
							_this.total_page = response.data.data.total_page;
							console.log(response.data.data);
						} else {
							console.log(response.data);
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			}
		},
		mounted() {
			//页面加载时获取商品信息
			this.getGoods();
			let _this = this;
			axios
				.get("/api/v1.0/goods/get_sort")
				.then(function(response) {
					if (response.data.errno == '0') {
						_this.goods_sort = response.data.data;
						console.log(response.data.data);
					} else {
						console.log(response.data);
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	};
</script>

<style scoped>
	.productTitle {
		height: 6vh;
		padding-top: 2vh;
		font-size: 14px;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.priceText {
		width: 80px;
		background: #f2f2f2;
		font-size: 15px;
		text-align: center;
		padding: 0.8vh;
	}
	.select {
		display: inline-block;
		position: relative;
		vertical-align: middle;
		padding: 0;
		overflow: hidden;
		background-color: #fff;
		color: #555;
		border: 1px solid #aaa;
		text-shadow: none;
		border-radius: 4px;
		transition: box-shadow 0.25s ease;
		z-index: 2;
		-webkit-appearance: listbox !important;
	}

	.select:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ccc;
		top: 14px;
		right: 10px;
		cursor: pointer;
		z-index: -2;
	}

	.select select {
		cursor: pointer;
		padding: 10px;
		width: 100%;
		border: none;
		background: transparent;
		background-image: none;
		-moz-appearance: none;
	}

	.select select:focus {
		outline: none;
	}
	
	select {
		text-align: center !important;
		text-align-last: center !important;
		width: 100% !important;
		padding: 0 2% !important;
		margin: 0 !important;
	}

	option {
		text-align: center !important;
	}
</style>
